<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header to="/securityActivity" :back="true" />
    <!-- 主体部分 -->
    <div class="bottomBox">
      <!-- 左侧 -->
      <div class="leftBox">
        <importantLeft />
      </div>
      <!-- 中间 -->
      <div class="centerBox">
        <headline :name="iaName" />
        <div class="botBox">
          <OlMap :refId="'importantIndex'" :blueChina=false :showSouthSea=false :center="centerDefault" :zoom="zoomDefault" :maxZoom="20" style="width:90%;height: 100%" @getMap="getMap"></OlMap>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rightBox">
        <div class="imgShowBox">
          <subheadings :name="titleName" />
          <div class="conBoxs">
            <ul class="ls-total" >
            <li class="ls-total-item" v-for="(v,i) in conList" :key="i">
              <img class="ls-total-img" :src="v.url" alt="" />
              <span class="ls-total-title">{{v.name}}</span>
            </li>
          </ul>
           <!-- <el-collapse v-model="activeNames" @change="handleChange(v)" v-for="(v,i) in titleList" :key="i">
            <el-collapse-item class="collapseItem" :title="v.name" :name="v.num">
               <ul class="ls-total">
            <li class="ls-total-item"  v-for="(item,index) in conList" :key="index">
              <img class="ls-total-img" :src="item.url" alt="" />
              <span class="ls-total-title">{{item.name }}</span>
            </li>
          </ul> 
            </el-collapse-item> 
          </el-collapse>  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getZdcs, getLittleZdcs } from '@/api/securityActivity.js';
import { inject } from 'vue';
const { proxy } = getCurrentInstance();
const titleList=ref([])
const conList=ref([])
const activeNames=ref(0)
const titleName=ref('')

import OlMap from '@/components/Olmap';
import { Style, Circle as CircleStyle, Fill, Stroke, Icon, Text } from 'ol/style';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import {boundingExtent} from 'ol/extent';
import { getTiandituVecMap,getTiandituVecText } from '@/map/projMap.js';
import redMarkerSmall from '@/assets/map/image/newImage/redMarkerSmall.png';
import { useRouter } from "vue-router"; 

const router = useRouter();
const route = useRoute();
const {name}=route.query;
const {id}=route.query;
//活动的name id
const {iaName}=route.query;
const {iaId}=route.query;
titleName.value=name
proxy.$globalVar.name=iaName
proxy.$globalVar.iaId=iaId
const mapInstance = ref(null);
const pointsLayer = ref(null);
const pointsData = ref(null);
const zoomDefault = ref(13);
const centerDefault = ref([parseFloat(route.query.lon),parseFloat(route.query.lat)]);
getData()
function getData(){
  getZdcs({iaId:id}).then(res=>{
    console.log(res)
    titleList.value=res.data
  })
  getLittleZdcs({zdcsId:id}).then(res=>{
    conList.value=res.data
    conList.value.map((item)=>{
      item.url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item.url)
    })
  })
}
function getImg(val){
  getLittleZdcs({zdcsId:val.id}).then(res=>{
    conList.value=res.data
    conList.value.map((item)=>{
      item.url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item.url)
    })
  })
}
//选中点的id和名称
const selectPoint = ref(null);

const getMap = (map) => {
  mapInstance.value = map.value;

  addTiandituLayer();

  getZdcsData();

  setupSelectInteraction();
};

function addTiandituLayer() {
  let layer1 = getTiandituVecMap();
  let layer2 = getTiandituVecText();
  layer1.setZIndex(1);
  layer2.setZIndex(2);
  mapInstance.value.addLayer(layer1);
  mapInstance.value.addLayer(layer2);
}

function getZdcsData() {
  getZdcs({iaId:route.query.iaId}).then((res) => {
    console.log('==============res: ',res);
    pointsData.value = res.data;
    showPointsLayer();
    setMapPosition();
  });
}

function setMapPosition() {
  const extent =  pointsLayer.value.getSource().getExtent();
  var view = mapInstance.value.getView();
  view.fit(extent, {
      padding: [50, 50, 50, 50], // 可选，用于在边界框周围添加填充
      duration: 1000 // 可选，动画持续时间（毫秒）
  });

  setTimeout(function() {
    mapInstance.value.getView().setCenter([parseFloat(route.query.lon),parseFloat(route.query.lat)]);
  }, 1000); 

}

function showPointsLayer() {
  if(!pointsData || !pointsData.value) return;
  if (pointsLayer && pointsLayer.value) {
    mapInstance.value.removeLayer(pointsLayer.value);
  }

  pointsLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 3,
  });

  mapInstance.value.addLayer(pointsLayer.value);
  for( let i=0; i<pointsData.value.length; i++ ) {
    let item = pointsData.value[i];
    
    const lon = item.longitude;
    const lat = item.latitude;
    const point = new Feature({
      geometry: new Point([lon, lat]),
    });
    const style = new Style({
        image: new Icon({
          src: redMarkerSmall,
          anchor: [0.5, 1],
          scale: 1.0,
        }),
      });
    point.set('type','point');
    point.set('point_index',i+'');
    point.setStyle(style);
    pointsLayer.value.getSource().addFeature(point);
  }
}

const setupSelectInteraction = () => {
  // 监听地图的点击事件
  mapInstance.value.on('click', (event) => {
    const features = mapInstance.value.getFeaturesAtPixel(event.pixel);
    let pointsSource = pointsLayer.value.getSource();

    //点中了整个图标区域
    if (features.length > 0) {

      const tempFeature = features[0];
      //如果点中了大头针区域
      if(tempFeature.get('type') == 'point') {
        console.log('点击了大头针：');

        let index = Number(tempFeature.get('point_index'));
        let point = pointsData.value[index];

        selectPoint.value = {id:point.id,name:point.name};
        titleName.value= selectPoint.value.name

        console.log('============selectPoint:',selectPoint.value);
        getImg(selectPoint.value)
        mapInstance.value.getView().animate({
          center: [parseFloat(point.longitude),parseFloat(point.latitude)],
          duration: 500,
        });
        
      }

    }else {
      console.log('点击了地图：');
    }
  });
};



</script>
<style scoped lang="scss">
.app-container {
  background-image: url('../../assets/images/common/common_title.png') !important;
  //   background-size: 100% 100%;
  .el-table .el-table__cell {
    padding: 0px 0 !important;
    height: 25px !important ;
    line-height: 25px !important;
  }
  .bottomBox {
    width: 100%;
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    height: calc(100% - 90px);
    .leftBox {
      width: 450px;
      .imgShowBox {
        width: 450px;
        height: 460px;
        margin-bottom: 20px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(2) {
          height: 240px;
        }
        &:nth-child(3) {
          height: 200px;
        }
        .upBox {
          width: 100%;
          text-align: center;
          .upArrow {
            margin: -44px 0 54px 0px;
          }
        }
        .downBox {
          width: 100%;
          text-align: center;
          .downArrow {
            margin: -64px 0 54px 0px;
          }
        }
        .imgtop {
          color: white;
          font-size: 20px;
        }
        .conBox {
          width: 100%;
          display: flex;
          color: #e6f4fd;
          font-size: 18px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          flex-direction: column;
          justify-content: center;
          margin: -44px 0 54px 0px;
          padding: 0 18px;
          box-sizing: border-box;
          .el-table .el-table__header-wrapper th {
            background-color: none;
            color: #fff;
          }
          .el-table .el-table__cell {
            height: 15px !important;
          }
          &-textStyle {
            display: block;
            width: 424px;
            height: 14px;
            line-height: 24px;
            border-radius: 0px 0px 0px 0px;
            font {
              padding: 0 14px;
              border-bottom: 1px solid #475adb;
            }
          }
          .textStyle {
            width: 426px;
            display: flex;
            padding: 2px 10px;
            span {
              display: inline-block;
              width: 90px;
              height: 14px;
              font-size: 14px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              text-align: center;
              color: #e6f4fd;
              line-height: 34px;
            }
          }
        }
        
        .imgBox {
          height: 320px;
          margin: -54px 0 54px 20px;
          overflow-y: auto;
          &-item {
            padding-bottom: 20px;
            position: relative;
            height: 150px;
            margin-bottom: 10px;
          }
          &-img {
            width: 410px;
            height: 150px;
          }
          &-txt {
            position: absolute;
            bottom: -12px;
            left: 0px;
            width: 410px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #475adb;

            border-radius: 0px 0px 0px 0px;
            span {
              display: block;
              width: 112px;
              height: 16px;
              font-size: 16px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff !important;
              line-height: 16px;
            }
          }
        }
        .imgBox::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
        .pStyle {
          padding: 0 20px;
          margin-top: -20px;
          span {
            width: 411px;
            height: 58px;
            font-size: 18px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #46ffff;
            border-bottom: 1px solid #46ffff;
          }
        }
      }
    }
    .centerBox {
      flex: 1;
      .head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 501px;
          height: 71px;
        }
        p {
          position: absolute;
          left: 40%;
          bottom: 0%;
          width: 150px;
          height: 30px;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
          font-weight: normal;
          color: #46ffff;
          line-height: 46px;
        }
      }
      .botBox {
        height: 640px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-box {
          width: 860px;
        }
        img {
          width: 860px;
          height: 640px;
        }
      }
    }
    .rightBox {
      width: 450px;
      padding: 10px 20px;
      .imgShowBox {
        width: 450px;
        height: 940px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        .imgBox {
          padding-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &-img {
            display: block;
            width: 410px;
            height: 150px;
          }
          &-txt {
            width: 410px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #475adb;

            border-radius: 0px 0px 0px 0px;
            span {
              display: block;
              width: 112px;
              height: 16px;
              font-size: 16px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff !important;
              line-height: 16px;
            }
          }
        }
      }
    
      .ls-total {
        width: 430px;
        height: 860px;
        overflow-y: auto;
        margin-top: -20px;
        &-item {
          width: 400px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding-bottom: 20px;
          span {
            display: block;
          }
        }
        &-img {
          width: 450px;
          height: 300px;
        }
        &-title {
          width: 150px;
          height: 16px;
          font-size: 16px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
        }
      }
      .ls-total::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
  }
}
.conBoxs{
  margin: -20px 0 0 0;
}
.el-collapse{
  // margin: -20px 0 0 0;
  // --el-collapse-border-color:none!important;
  --el-collapse-content-bg-color:none!important;
}
.collapseItem ::v-deep .el-collapse-item__header{
    padding: 0 20px!important;
    // background-color:transparent;
    // color: #fff;
  }
</style>
